<template>
  <div class="look-view">
    <a-form layout="vertical" style="margin-top: 10px">
      <a-row :gutter="8">
        <a-col :span="3">
          <a-form-item>
            <a-input
              placeHolder="搜索联系人名称"
              v-model:value="searchParams.name"
            />
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item>
            <a-input
              placeHolder="搜索联系人电话"
              v-model:value="searchParams.tel"
            />
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item>
            <a-input
              placeHolder="搜索公司名称"
              v-model:value="searchParams.company"
            />
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item>
            <a-select
              style="width: 100%"
              placeholder="请选择意向项目"
              v-model:value="searchParams.village_id"
              :options="villageOptions"
            />
          </a-form-item>
        </a-col>
        <a-col :span="3">
          <a-form-item>
            <a-select
              style="width: 100%"
              placeholder="请选择客户状态"
              v-model:value="searchParams.status"
              :options="customerStatusOptions"
            >
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :span="3">
          <a-form-item>
            <a-select
              style="width: 100%"
              placeholder="请选择客户渠道"
              v-model:value="searchParams.channel_id"
              :options="customerChannelOptions"
            >
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :span="3">
          <a-form-item>
            <a-range-picker
              class="w-100p"
              v-model:value="searchParams.created_time"
              :value-format="dateFormatStr"
              @change="handleRangePickerChange"
            />
          </a-form-item>
        </a-col>

        <a-col :span="3">
          <a-form-item label="">
            <a-space>
              <a-button @click="reset">重置</a-button>
              <a-button type="primary" @click="getDataList(true)">
                搜索
              </a-button>
            </a-space>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <div class="view-list">
      <template v-if="viewData.length">
        <a-list
          v-for="(viewType, typeIndex) in viewData"
          :data-source="viewType.list"
          :key="typeIndex"
          :split="false"
          :loading="viewLoading"
          class="view-list-one"
        >
          <template #header>
            <div class="view-list-one-title">
              {{viewType.status_txt}}({{viewType.list.length}})
            </div>
          </template>
          <template #renderItem="{ item }">
            <a-list-item
              class="list-box list-box-sub"
            >
              <a-card size="small" style="width: 100%">
                <template #title>
                  <a-avatar :style="{ backgroundColor: '#2681f3', marginRight: '4px'}">{{item?.name?.slice(0, 1)}}</a-avatar>
                  <span style="color:#2681f3;">
                  {{item?.name}}
                </span>
                  <span style="margin-left: 4px">
                  {{item?.tel}}
                </span>
                </template>
                <template #extra>
                  <a-dropdown :trigger="['click']">
                    <MoreOutlined />
                    <template #overlay>
                      <a-menu @click="(val) => handleAction(val, item)">
                        <a-menu-item key="follow" v-if="item.status !== 30">
                          <span class="link">跟进</span>
                        </a-menu-item>
                        <a-menu-item key="recycle" v-if="isAdmin && canRecycle">
                          <span class="link">回收</span>
                        </a-menu-item>
                        <a-menu-item
                          key="detail"
                        >
                          <span class="link">详情</span>
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </template>
                <div class="view-content-box">
                  <p>客户预算：{{item.budget_amount || item.budget_amount == 0 ? item.budget_amount + '元' : '--'}}</p>
                  <p>意向项目：{{item.village_name}}</p>
                  <p>需求面积：{{item.expect_area_max || item.expect_area_max == 0 ? item.expect_area_max + 'm²' : '--'}}</p>
                  <p>跟进人员：{{item.followup_uname}}</p>
                  <p>预计签约时间：{{item.expect_contract || '--'}}</p>
                  <div class="rate-box" v-if="viewType.is_end !== 1">
                    <span style="font-size: 14px">{{item.deal_precent || item.deal_precent == 0 ? item.deal_precent + '%' : '--'}}</span>
                    <span style="font-size: 12px">成交率</span>
                  </div>
                </div>
              </a-card>
            </a-list-item>
          </template>
        </a-list>
      </template>
      <a-empty v-else/>
    </div>


    <!-- 客户跟进 -->
    <FollowUpCustomer
      :visible="followVisible"
      :id="detailId"
      :customerChannelOptions="customerChannelOptions"
      @handleCancel="handleFollowClose"
      @success="handleFollowSuccess"
    />

    <!--  客户详情  -->
    <CustomerDetail
      :visible="detailVisible"
      :id="detailId"
      @handleCancel="handleDetailClose"
    />
  </div>
</template>

<script>
import {reactive, ref, toRefs, computed, watch, defineComponent, createVNode} from "vue";
import request from "../../../../common/utils/request";

import store from "@/store";
import {Form, message, Modal} from "ant-design-vue";
const useForm = Form.useForm;
const dateFormatStr = "YYYY-MM-DD";
import {
  ExclamationCircleOutlined,
  MoreOutlined,
} from "@ant-design/icons-vue";
import CustomerDetail from "@/views/village/BusinessManage/modules/CustomerDetail.vue";
import FollowUpCustomer from "@/views/village/BusinessManage/modules/FollowUpCustomer.vue";
export default defineComponent( {
  name: "IntendedCustomerView",
  props: {
    activeKey: {
      type: [Number, String],
      default: '',
    },
    villageOptions: {
      type: Array,
      default: () => [],
    },
    customerChannelOptions: {
      type: Array,
      default: () => [],
    },
    isAdmin: {
      type: Boolean,
      default: false,
    },
    canRecycle: {
      type: Boolean,
      default: false,
    }
  },
  components: {
    FollowUpCustomer,
    CustomerDetail,
    MoreOutlined,
  },
  setup(props, { emit }) {
    const state = reactive({
      viewData: [],
      viewLoading: false,
      customerStatusOptions: [],
      detailId: 0,
      followVisible: false,
      detailVisible: false,
    });

    const searchParams = reactive({
      name: "", // 联系人名称
      tel: "", // 联系人电话
      company: '', // 公司名称
      village_id: undefined, // 意向项目id
      status: undefined, // 客户状态
      channel_id: undefined, // 客户渠道id
      created_time: undefined,
    });

    const { resetFields } = useForm(searchParams, {});



    const getDataList = () => {
      state.viewLoading = true;
      const params = {
      };
      if (searchParams.created_time) {
        searchParams.created_start = searchParams.created_time[0];
        searchParams.created_end = searchParams.created_time[1];
      }
      for (let key in searchParams) {
        if (searchParams[key] || searchParams[key] === 0) {
          params[key] = searchParams[key];
        }
      }
      delete params.created_time;
      request
        .post("/org", '/business/customer/boardList', params)
        .then((res) => {
          state.viewData = res?.newList || [];
        })
        .finally(() => {
          state.viewLoading = false;
        });
    };

    const handleFollow =  (record) => {
      state.detailId = record.id;
      state.followVisible = true;
    };

    const handleDetail = (record) => {
      state.detailId = record.id;
      state.detailVisible = true;
    };

    const handleDetailClose = () => {
      state.detailId = 0;
      state.detailVisible = false;
    };

    const handleFollowClose = () => {
      state.detailId = 0;
      state.followVisible = false;
    };

    const handleFollowSuccess = () => {
      handleFollowClose();
      getDataList();
    };

    const handleRecycle = (record) => {
      Modal.confirm({
        title: () => "提示",
        content: () => "确定要回收该客户吗？",
        icon: () => createVNode(ExclamationCircleOutlined),
        okText: () => "确定",
        onOk() {
          request
            .get("/org", "/business/customer/recovery", {id: record.id})
            .then((res) => {
              message.success(res?.msg || '操作成功');
              getDataList();
            })
        },
      });
    };

    const handleAction = (val, item) => {
      let action = val.key;
      if (action == 'follow') {
        handleFollow(item)
      } else if (action == 'recycle') {
        handleRecycle(item)
      } else if (action == 'detail') {
        handleDetail(item)
      }
    };
    const reset = () => {
      resetFields();
      getDataList()
    };

    const getStatus = () => {
      request.get("/org", "/business/customer/statusList", {}).then((res) => {
        state.customerStatusOptions = res.list.map((item) => ({
          value: item.status,
          label: item.name,
          ...item,
        }));
      });
    };

    const init = () => {
      getDataList();
      getStatus();
    };

    const handleRangePickerChange = (date, dateString) => {
      searchParams.created_time = date;
    };

    watch(
      () => props.activeKey,
      (val) => {
        if (val) {
          if (val == 3) {
            init();
          }
        }
      },
      { immediate: true }
    );

    return {
      ...toRefs(state),
      searchParams,
      dateFormatStr,
      handleRangePickerChange,
      reset,
      getDataList,
      handleAction,
      handleDetailClose,
      handleFollowClose,
      handleFollowSuccess,
    };
  },
});


</script>

<style lang="less" scoped>
.look-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
}
.look-box {
  height: 100%;
}
.view-list {
  flex: 1;
  display: flex;
  overflow-y: hidden;
  overflow-x: auto;
}
.view-list-one {
  width: 350px;
  background: #ececec;
  border-radius: 8px;
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  &:not(:last-child) {
    margin-right: 20px;
  }
}
.view-list-one-title {
  padding:0 14px;
  font-size: 18px;
  font-weight: bold;
  word-break: break-all;
}

.view-content-box {
  position: relative;
  p {
    &:last-of-type {
      margin-bottom: 0;
    }
  }
}
.rate-box {
  width: 56px;
  height: 56px;
  position: absolute;
  bottom: 0px;
  right: 10px;
  border-radius: 50%;
  border: 1px solid @primary-color;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: @primary-color;
}
:deep(.ant-spin-nested-loading) {
  overflow-y: auto;
  flex: 1;
  padding:0 14px;
  //height: calc(100% - 45px);
}

:deep(.ant-spin-nested-loading)::-webkit-scrollbar {
  width: 3px;
  height: 5px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道圆角*/
:deep(.ant-spin-nested-loading)::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ececec;
}

/*定义滑块 内阴影+圆角*/
:deep(.ant-spin-nested-loading)::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
  background-color: #dddddd;
}
.ant-empty {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
